<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model.trim="content" @keyup.enter="add"/>
	</header>
</template>

<script>
	export default {
        props: {
				  arr: {
						 type: Array,
						 required: true
					}
			 },

       data() {
				return {
					  content: ''
				};
			 },

			 methods: {
				 add() {
						if(this.content.length <= 0){
							   return alert('请输入内容')
						}
					   this.$emit('add', this.content)

            // 清空内容
						 this.content = ''
				 }
			 },

			 computed: {
				 isAll: {
					   set(val){
                  return this.arr.forEach(item => item.isDone = val)
							},
							get(){
								  return this.arr.every(item => item.isDone)
							}
				 }
			 }
	}
</script>
